import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
export default class App extends Component {
  // 当前案例中,每一个组件都需要用到todos任务数据,所以把这个数据定义在他们公共的父组件中,这个行为被称为状态提升
  // 如果没有todos这个数据,则localStorage.getItem返回的是null. 经过JSON.parse解析之后返回的还是null
  state = {
    todos: JSON.parse(localStorage.getItem('todos')) || [],
  }
  // 添加任务
  addTodo = (todoName) => {
    // todoName是Header组件传递过来的任务名
    // console.log(todoName)
    // 根据任务名,创建任务对象
    const todo = {
      id: Date.now(),
      todoName,
      isDone: false,
    }

    const newList = [...this.state.todos]
    newList.push(todo)
    this.setState({
      todos: newList,
    })
  }

  //删除一个任务
  delTodo = (id) => {
    // console.log(id)
    const newList = this.state.todos.filter((item) => item.id !== id)
    this.setState({
      todos: newList,
    })
  }
  // 修改任务
  updateTodo = (id) => {
    const newList = this.state.todos.map((item) => {
      if (item.id === id) item.isDone = !item.isDone
      return item
    })
    this.setState({
      todos: newList,
    })
  }

  //全选
  updateAllTodo = () => {
    // console.log(123)
    // 在这个函数中,我们需要自己计算最终给数据的isDone赋值的目标值
    // 计算的逻辑: 如果修改数据之前,所有的数据都选中的了,那么接下来就让所有的数据都不选中. 如果所有的数据中有一个没有选中,接下来,所有的数据都设置为选中

    // 如果所有数据有一个未选中,result就是true.如果都选中了,result就是false
    const result = this.state.todos.some((item) => {
      return !item.isDone
    })
    const newList = this.state.todos.map((item) => {
      // 如果result是true,说明有未选中,接下来要变成都选中
      item.isDone = result
      return item
    })
    this.setState({
      todos: newList,
    })
  }

  // 清除完成任务
  clearAllDone = () => {
    const newList = this.state.todos.filter((item) => !item.isDone)
    this.setState({
      todos: newList,
    })
  }

  // 编辑任务
  editTodo = (id, todoName) => {
    // console.log(id,todoName);
    const newList = this.state.todos.map((item) => {
      if (item.id === id) item.todoName = todoName
      return item
    })
    this.setState({
      todos: newList,
    })
  }

  render() {
    console.log(JSON.stringify(localStorage.getItem('todos')))
    // 只要todos数据发生变化,render函数就会被调用.所以要将最新的数据存储到localStorage的代码,直接写在render里面就可以
    // 注意: localStorge里面只能存字符串,所以一般会先把数据转成json格式的字符串,然后再存进去

    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          {this.state.todos.length ? (
            <div>
              <List
                list={this.state.todos}
                delTodo={this.delTodo}
                updateTodo={this.updateTodo}
                editTodo={this.editTodo}
              ></List>
              <Footer
                todos={this.state.todos}
                updateAllTodo={this.updateAllTodo}
                clearAllDone={this.clearAllDone}
              ></Footer>
            </div>
          ) : (
            <h1>恭喜您,暂无任务!</h1>
          )}
        </div>
      </div>
    )
  }
  componentDidUpdate() {
    localStorage.setItem('todos', JSON.stringify(this.state.todos))
  }
}
